<template>
  <div class="land-view">
    <div class="map-view" v-show="showHtml && !eidtHtml && !nutritionHtml">
       <iframe v-if="gisUrl" id="iframeContainer" :src="gisUrl" frameborder="0" scrolling="no" height="100%" width="100%" />
    </div>
    <receiveLand v-if="!showHtml" @close="closeReceive"  @eidt="editLand" /> 
    <eidtLand v-if="eidtHtml" @close="eidtHtml=false" /> 
    <nutritionLand v-if="nutritionHtml" @close="nutritionHtml=false" />  

  </div>
</template>

<script setup>
import { ref, onMounted,nextTick } from 'vue'
import { useUserStore } from '@/pinia/modules/user'
import receiveLand from './receive-land.vue'
import eidtLand from './eidtLand.vue'
import nutritionLand from './nutritionLand.vue'
import {getCookie} from '@/utils/cookie'


const userStore = useUserStore()
const gisUrl = ref('')
const showHtml = ref(true)
const eidtHtml = ref(false)
const nutritionHtml = ref(false)
let iframeDom = null
onMounted(() => {
  const baseUrl = import.meta.env.VITE_GIS_PAGE
  const userInfo = userStore.userInfo
  const farmInfo = userInfo.farmList.find(item => item.farmId == userInfo.farmId)
  const { province, district, city,farmName } = farmInfo
  let token = getCookie('token')

  let rul = `${baseUrl}/gisView/landMini/create?companyId=${userInfo.companyId}&farmId=${userInfo.farmId}&userId=${userInfo.userId}&userToken=${token}&userPosition=${farmInfo.locationLongitude},${farmInfo.locationLatitude}`
  if (userInfo.userName == 'admin' || userInfo.roleName == '平台管理员' || userInfo.nickName == '超级管理员') {
    gisUrl.value = `${baseUrl}/land/farm?userId=${userInfo.userId}&userPosition=${farmInfo.locationLongitude},${farmInfo.locationLatitude}&farmName=${farmName}`
  } else {
    gisUrl.value = `${baseUrl}/land/list?userId=${userInfo.userId}&farmId=${userInfo.farmId}&companyId=${userInfo.companyId}&userPosition=${farmInfo.locationLongitude},${farmInfo.locationLatitude}&isAdmin=0
    &province=${province}&district=${district}&city=${city}&farmName=${farmName}`
  }
  nextTick(() => {
    window.addEventListener('message', (res)=>{
      if(res?.data?.type=='open'){
        showHtml.value = false
      }
      console.log(res?.data?.type)
      if(res?.data?.type=='eidt'){
        eidtHtml.value = true
      }
      if(res?.data?.type=='import'){
        nutritionHtml.value = true
      }
      
    })
  })
})
const editLand =(row)=>{
  showHtml.value=true
   iframeDom = document.querySelector('#iframeContainer')
    iframeDom.contentWindow.postMessage({
      type: 'eidt',
      ...row,
      ...{
        companyId:userStore.userInfo.companyId
      }
    }, '*')
}
const closeReceive =()=>{
  showHtml.value=true
  iframeDom = document.querySelector('#iframeContainer')
    iframeDom.contentWindow.postMessage({
      type: 'refresh',
      companyId:userStore.userInfo.companyId
    }, '*')
}

</script>
<style lang="scss" scoped>
.land-view {
  height: calc(100vh - 120px);
  .map-view{
    height:100%;
    width:100%;
  }
}
</style>

